<template>
  <div>
    <van-nav-bar title="设置" left-arrow @click-left="$router.push('/user')" />
    <div class="b-t b-t-w-10">
      <van-skeleton :row="15" :loading="!ready" class="m-t-20">
        <van-cell-group>
          <van-cell v-for="item in info" :key="item.key">
            <p slot="title" class="flex a-center">
              <span class="text-title w-100">{{item.zhName}}</span>
              <span class="m-l-10 text-content">{{item.val}}</span>
            </p>
          </van-cell>
          <van-cell
            class="flex a-center"
            title="登录密码"
            arrow-direction="right"
            value="修改"
            to="/reset"
          >
            <van-icon slot="right-icon" name="arrow" class="text-grey" />
          </van-cell>
        </van-cell-group>
      </van-skeleton>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { getItem } from '@/utils/storage'
export default {
  data () {
    return {
      ready: false,
      info: []
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    ...mapMutations(['changeUser']),
    init () {
      this.getInfo()
    },
    async getInfo () {
      await this.getUserInfo()
      let recentRecord = await this.getRecentRecord()
      this.info = [
        { key: 'petName', zhName: '昵称', val: this.user.userInfo.petName },
        { key: 'loginName', zhName: '账号', val: this.user.userInfo.loginName },
        { key: 'name', zhName: '姓名', val: this.user.userInfo.name },
        { key: 'sex', zhName: '性别', val: this.user.userInfo.sex === '1' ? '男' : '女' },
        { key: 'idcard', zhName: '身份证号', val: this.transferIdCard(this.user.userInfo.idcard) },
        { key: 'phone', zhName: '手机号', val: this.transferPhone(this.user.userInfo.phone) },
        { key: 'bxgs', zhName: '保险公司', val: recentRecord.bxgs },
        { key: 'bxqq', zhName: '保险起期', val: recentRecord.bxqq },
        { key: 'bxzq', zhName: '保险止期', val: recentRecord.bxzq }
      ]
    },
    async getUserInfo () {
      if (!this.user.userInfo.id) {
        let userInfo = JSON.parse(await getItem('userInfo')).user
        if (userInfo) {
          this.changeUser(userInfo)
        } else {
          this.$router.push('/login')
        }
      }
    },
    async getRecentRecord () {
      let { vipTbList } = await this.$api.post('/tb/query', {})
      this.ready = true
      return vipTbList[0] || {}
    },
    transferIdCard (idcard) {
      return `${idcard.substr(0, 6)}********${idcard.substr(14)}`
    },
    transferPhone (phone) {
      return `${phone.substr(0, 3)}********${phone.substr(8)}`
    }
  },
  computed: {
    ...mapState(['user'])
  }
}
</script>

<style lang="scss" scoped>
.b-t-w-10 {
  border-top-width: 10px;
}
</style>
